<template>
  <div class="space-tags-analyze">
    <a-card title="空间图片标签分析" style="width: 100%">
      <v-chart :option="options" style="height: 320px; max-width: 100%;" :loading="loading" />
    </a-card>
  </div>
</template>

<script setup lang="ts">

// 定义父组件传递的参数
import { computed, ref, watchEffect } from 'vue'
import {
  getSpaceCategoryAnalyzeUsingPost,
  getSpaceTagsAnalyzeUsingPost,
  getSpaceUsageAnalyzeUsingPost
} from '@/api/spaceAnalyzeController'
import { message } from 'ant-design-vue'
import VChart from 'vue-echarts'
import 'echarts'
import 'echarts-wordcloud'

interface props {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: number
}

// 使用withDefaults定义默认值
const props = withDefaults(defineProps<props>(), {
  queryAll: false,
  queryPublic: false
})

// 定义加载状态
const loading = ref(true)

// 定义获取的数据源
const dataList = ref<API.SpaceTagAnalyzeVO[]>([])

// 向后端获取空间资源的使用情况
const getSpaceTagsAnalyze = async () => {
  loading.value = true

  const res = await getSpaceTagsAnalyzeUsingPost({
    queryAll: props.queryAll,
    queryPublic: props.queryPublic,
    spaceId: props.spaceId
  })
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data ?? []
  } else {
    message.error('获取数据失败，' + res.data?.message)
  }

  loading.value = false
}

// 监听变量的变化，变量变化时重新加载数据
watchEffect(() => {
  getSpaceTagsAnalyze()
})


/* 定义 echarts 的 option */
// 用 computed 计算属性定义，使变量发生变化时，echarts 也会重新渲染
const options = computed(() => {
  const tagData = dataList.value.map((item) => ({
    name: item.tag,
    value: item.count,
  }))

  return {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => `${params.name}: ${params.value} 次`,
    },
    series: [
      {
        type: 'wordCloud',
        gridSize: 10,
        sizeRange: [12, 50], // 字体大小范围
        rotationRange: [-90, 90],
        shape: 'circle',
        textStyle: {
          color: () =>
            `rgb(${Math.round(Math.random() * 255)}, ${Math.round(
              Math.random() * 255,
            )}, ${Math.round(Math.random() * 255)})`, // 随机颜色
        },
        data: tagData,
      },
    ],
  }
})



</script>

<style scoped>

</style>
